<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>车享乐-用户中心</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/js/slide.js"></script>
	<script type="text/javascript" src="../../static/layui/layui.js"></script>
	<link href="../../static/layui/css/layui.css" rel="stylesheet" rel="stylesheet">
	<script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到鑫鑫车享乐租车系统!  祝您畅享旅途，鑫鑫相伴！</div>
			<div class="fr">
				<div class="user_link fl">
					<a href="javascript:;">
						欢迎您：<img class="avatar-img" src="/pic/${user.avatar}"/>
						${user.username}
					</a>
					<span>|</span>
					<a href="/page/user/info">用户中心</a>
					<span>|</span>
					<a href="/page/user/order">我的订单</a>
					<span>|</span>
					<a href="javascript:logout()">注销</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/xx-logo.png" width="180%"></a>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info" class="active">· 个人信息</a></li>
				<li><a href="/page/user/order">· 全部订单</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">

			<form class="layui-form" lay-filter="updateFormFilter" action="">
				<div class="layui-form-item">
					<input type="hidden" name="id" id="${admin.id}">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline layui-input-wrap">
						<input type="text" name="username" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline layui-input-wrap">
						<input type="text" name="account" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">头像</label>
					<div class="layui-input-inline layui-input-wrap">
						<div style="width: 132px;">
							<div class="layui-upload-list">
								<img class="layui-upload-img" width="189px" height="189px" class="layui-upload-img" id="demo1">
								<div id="demoText"></div>
								<input type="hidden" name="avatar" id="imageId">
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block" >
						<input type="radio" name="gender" value="男" title="男" checked>
						<input type="radio" name="gender" value="女" title="女">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">年龄</label>
					<div class="layui-input-inline layui-input-wrap">
						<input type="text" name="age"  placeholder="请输入" disabled autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">邮箱</label>
						<div class="layui-input-inline">
							<input type="text" name="email" disabled placeholder="请输入" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline layui-input-wrap">
						<input type="text" name="phone" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="button-container">
						<button type="button" class="layui-btn layui-bg-blue" lay-submit lay-filter="submitUpdateInfo">修改个人信息</button>
						<button type="button" class="layui-btn layui-bg-orange" lay-submit lay-filter="submitUpdateAP">修改账号密码</button>
					</div>
				</div>
			</form>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/car/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(['form'], function(){
			var form = layui.form;

			var id = ${user.id};
			$.post(
				'/user?method=selectByInfoId',
				{'id': id},
				function (result) {
					if (result.code == 0) {
						form.render('select');
						form.val('updateFormFilter', result.data);
						$('#demo1').attr('src', '/pic/' + result.data.avatar);
						// 获取性别数据
						var gender = result.data.gender;

						// 根据性别设定对应的单选框
						if (gender === '男') {
							$('input[name="gender"][value="男"]').prop('checked', true);
							$('input[name="gender"][value="女"]').prop('disabled', true);
						} else if (gender === '女') {
							$('input[name="gender"][value="女"]').prop('checked', true);
							$('input[name="gender"][value="男"]').prop('disabled', true);
						}
					}
				},
				'json'
			);

			form.on('submit(submitUpdateInfo)', function (data) {
				var field = data.field;
				console.log(field);
				layer.open({
					title: '修改个人信息',
					type: 2,
					area: ['35%', '90%'],// 宽高
					content: '/page/userinfo/updateinfo?id='+field.id,
				});
			})

			form.on('submit(submitUpdateAP)', function (data) {
				var field = data.field;
				console.log(field);
				layer.open({
					title: '修改密码',
					type: 2,
					area: ['35%', '70%'],// 宽高
					content: '/page/userinfo/updatepassword?id='+field.id,
				});
			})
		});
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user?method=logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okUrl(result.msg, '/page/login');
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>